﻿var DateRange = {
    model: function (d = {}) {
        this.Title = d.Title || "日期起止";
        this.EnTitle = d.EnTitle || "";
        this.Tips = d.Tips || "";
        this.Name = d.Name || 'lg' + lg.GetSN(6, 10);
        this.Value = d.Value || "";
        this.ExportName = d.ExportName || "";
        this.Width = d.Width || "100%";
        this.Required = d.Required || false;
        this.DateFormat = d.DateFormat || "";
        this.Range = d.Range || ["", ""];
        this.IsRender = d.IsRender != undefined ? d.IsRender : true;
        this.IsShow = d.IsShow || false;
        this.IsExport = d.IsExport || false;
        this.IsWhere = d.IsWhere || false;
        this.WhereKey = d.WhereKey || "精确匹配"
    },
    component: {
        name: "lg-form-daterange",
        data: {
            props: {
                items: {
                    type: Array,
                    default: []
                },
                value: {
                    type: [String, Object],
                    default: ""
                },
                data: {
                    type: Object,
                    default: {}
                },
                format: {
                    type: String,
                    default: "date"
                },
                //0填写 1查看
                renderType: {
                    type: Number,
                    default: 0
                }
            },
            data() {
                return {
                    start: "",
                    end: ""
                }
            },
            mounted() {
                this.FormatData();
                this.RenderDate();
            },
            methods: {
                FormatData: function () {
                    if (this.data.Value && this.data.Value.length > 0) {
                        var arr = this.data.Value.split("~");
                        if (arr.length >= 1) {
                            this.start = arr[0];
                        }
                        if (arr.length > 1) {
                            this.end = arr[1];
                        }
                    }
                },
                RenderDate: function () {
                    var that = this;
                    laydate.render({
                        elem: '#' + this.data.Name
                        , type: this.format
                        //设置开始日期、日期日期的 input 选择器
                        //数组格式为 2.6.6 开始新增，之前版本直接配置 true 或任意分割字符即可
                        , range: ['#' + this.data.Name + '-start', '#' + this.data.Name + '-end'],
                        done: function (v, d, e) {
                            if (v) {
                                var arr = v.split(" - ");
                                that.start = arr[0];
                                that.end = arr[1];
                                that.$emit("update:value", arr[0] + "~" + arr[1])
                            } else {
                                that.start = "";
                                that.end = "";
                                that.$emit("update:value", "")
                            }


                        }
                    });
                }
            },
            template: `
						<div :class="['lg-form-item',{'lg-ver-error':data.error},{'pointer-none':renderType==1}]" :style="{'width':data.Width}">
										<div class="lg-form-block">
											<div class="lg-form-title">
												<div class="lg-form-title-item">
													<i v-if="data.Required">*</i>
													<span class="cn">{{data.Title}}</span>
													<span class="en">{{data.EnTitle}}</span>
												</div>
											</div>
											<div class="lg-form-control  lg-form-mark lg-form-flex" :id="data.Name">
												<div class="lg-inline lg-inline-100">
													<span class="lg-form-mark-icon">起</span>
													<input type="text" readonly class="lg-input lg-input-text" :id="data.Name+'-start'" v-model="start">
												</div>
												<div class="lg-inline lg-inline-100">
													<span class="lg-form-mark-icon">止</span>
													<input type="text" readonly class="lg-input lg-input-text" :id="data.Name+'-end'" v-model="end">
												</div>
											</div>
										</div>
										<div class="lg-form-block">
					          				<div class="lg-form-tip"><p>{{data.Tips}}</p></div>
					          				<div class="lg-form-ver" v-if="data.error">{{data.errMsg}}</div>
										</div>
						</div>


`
        }
    }
}


DateRange.model.prototype.verify = function () {
        var res = { state: true, msg: "ok" };
        if (this.Required) {
            res.state = lg.regx.required(this.Value);
            if (!res.state) {
                res.msg = "必填项不可为空!";
                return res;
            }
        }
        return res
    }

export { DateRange }
